<template>
  <transition name="el-fade-in-linear">
    <div class="pop__container" v-show="listTabs.includes(showPopType)">
      <div class="tabs">
        <span
          v-for="item in tabs"
          :key="item.name"
          class="cursor"
          :class="{ active: showPopType === item.name }"
          @click="handleModelShow(item.name)"
          >{{ item.label }}</span
        >
      </div>
      <models v-if="showPopType === 'models'" />
      <list-agent v-if="showPopType === 'agent'" />
      <list-star v-if="showPopType === 'agent-star'" />
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'
import Models from './models.vue'
import ListAgent from './list-agent.vue'
import ListStar from './list-star.vue'
export default {
  name: 'ChatPop',
  components: {
    Models,
    ListAgent,
    ListStar
  },
  data () {
    return {
      tabs: [
        {
          label: '模型',
          name: 'models'
        },
        {
          label: '智能体',
          name: 'agent'
        },
        {
          label: '我的收藏',
          name: 'agent-star'
        }
      ],
      listTabs: ['models', 'agent', 'agent-star']
    }
  },
  computed: {
    ...mapGetters(['chatStore']),
    showPopType () {
      return this.chatStore.showModels
    }
  },
  methods: {
    handleModelShow (val) {
      this.$store.dispatch('chat/setChatStore', { showModels: val })
    }
  }
}
</script>

<style lang="scss" scoped>
.pop__container {
  position: absolute;
  top: -10px;
  left: 0;
  transform: translateY(-100%);
  width: 270px;
  height: 350px;
  border-radius: 8px;
  background: #262735;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
  z-index: 9;
}
.tabs {
  padding: 14px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  position: relative;
  z-index: 1;
  span {
    font-size: 12px;
    color: rgba($color: #FFFFFF, $alpha: 0.7);
    position: relative;
    &:hover {
      color: #FFFFFF;
    }
  }
  span.active {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 1;
    &::before {
      content: "";
      width: 100%;
      height: 4px;
      border-radius: 26px;
      background: #4e5fff;
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }
  }
}
</style>
